<!--
* @description 套装列表
* @fileName tzList.vue
* @author huangyu
* @date 2022/06/10 15:44:10
!-->
<template>
    <div class="otor_content">
        <div class="otor_wrap border">
            <el-form :inline="true" class="otor_form otor_form_search">
                <el-form-item label="套装名称">
                    <el-input placeholder="套装名称" v-model="name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="otor_wrap border">
            <el-table :data="list"  @row-dblclick="rowDBClick" highlight-current-row width="100%" border>
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <el-table-column label="物品名称" prop="name">
                    <template slot-scope="scope">
                        <span class="color_blue" style="cursor:pointer" @click="clickDetail(scope.row)">{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量">
                    <template slot-scope="scope">
                        {{scope.row.list.length}}
                    </template>
                </el-table-column>
           </el-table>
        </div>

        <pagination
        :total="total"
        :current-page="pageindex"
        :display="pagesize"
        @pagechange="pagechange"
        ></pagination>

        <!-- 套装详情 -->
        <el-dialog :visible.sync="dialogDetail" width="550px" top="50px" title="套装详情" append-to-body v-dialogDrag>
            <vtzDetail :model="row"></vtzDetail>
        </el-dialog>

    </div>
</template>

<script>
import { get } from '@/common/app.js'
import vtzDetail from './tzDetail.vue'
import pagination from "@/components/common/pagination.vue";
export default {
    props:{
        isComponents: Boolean,
    },
    components: {vtzDetail,pagination},
    data() {
        return {
            list: [],
            name: '',

            pageindex: 1,
            pagesize: 20,
            total: 0,

            dialogDetail: false,
            row: {},
        }
    },
    mounted() {
    },
    methods: {
        rowDBClick(row){
            if(this.isComponents){
                this.$confirm(`确认 选择" ${row.name} "套装吗？`, "提示").then(() => {
                    this.$emit('rowData',row)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });          
                });
                
            }
        },
        clickDetail(row){
            this.row = row
            this.dialogDetail = true
        },

        search(){
            this.pageindex = 1
            this.getData()
        },
        getData(){
            let params = {
                type: 'getAionData',
                cType: this.ZBType,
                data: {
                    isTZ: true, //查询套装true
                    TZname: this.name,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game',params).then(res=>{
                if(res){
                    this.list = res.list
                    this.total = res.total
                    console.log(this.list)
                }
            })
        },
        
        pagechange: function(currentPage) {
            this.pageindex = currentPage;
            this.getData();
        },

    },
}
</script>

<style scoped>
</style>